<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>登录</title>
    <link rel="stylesheet" type="text/css" href="__CSS__/api.css" />
    <link rel="stylesheet" type="text/css" href="__CSS__/tt.css" />

    <style>
        html {
            background: rgba(0, 0, 0, 0.65);
        }

        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        .out {
            width: 553px;
            height: 520px;
            background-color: #fff;
            padding: 50px 80px 0;
            box-sizing: border-box;
            position: relative;
            margin: auto;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
        }

        .close {
            width: 22px;
            height: 22px;
            position: absolute;
            right: 20px;
            top: 20px;
        }

        .deng {
            font-size: 20px;
            font-weight: 600;
            color: rgba(51, 51, 51, 1);
            line-height: 28px;
            text-align: right;
        }

        .zhu {
            font-size: 20px;
            color: rgba(102, 102, 102, 1);
            line-height: 28px;
        }

        .zh {
            color: #333;
            font-size: 15px;
            /* font-weight: 600; */
            line-height: 21px;
            margin: 24px 0 8px;
        }

        .outer {
            /*margin-top: 1rem;*/
            align-items: center;
            border-bottom: 1px solid #EEEEEE;
        }

        input[type="tel"],
        input[type="text"],
        input[type="password"] {
            height: 42px;
            margin: 0;
            padding: 0;
            font-size: 13px;
            color: #333;
            background: transparent;
            outline: none;
        }

        input::-webkit-input-placeholder {
            color: #999;
        }

        .cord {
            font-size: 14px;
            font-weight: 600;
            color: rgba(153, 153, 153, 1);
            line-height: 18px;
        }

        .outer3 {
            justify-content: space-between;
        }

        .tx_yzm {
            width: 90px;
            height: 40px;
            margin-top: 40px;
        }

        .btn {
            height: 52px;
            background: #FC2B40;
            border-radius: 26px;
            font-size: 16px;
            color: rgba(255, 255, 255, 1);
            line-height: 52px;
            text-align: center;
            margin-top: 40px;
            position: relative;
        }

        .kuai_deng {
            font-size: 13px;
            color: rgba(153, 153, 153, 1);
            line-height: 50px;
            text-align: center;
        }
        .btn:hover{
            -webkit-box-shadow:0px 10px 15px rgba(252,43,64,0.2);
        }
        .btn:active{
            -webkit-box-shadow:none;
        }
        .btn:active span{
            display: inline-block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, 0.2);
            border-radius:26px;
        }
        /*禁用状态*/
        .btn1{
            background:rgba(204,204,204,1);
        }
        .code-word {
            color: #0065F0;
            font-size: 16px;
            position: absolute;
            right: 0;
            bottom: 0.8rem;
        }
        .hand_icon{
            cursor:pointer;
        }
        .code_gray{
            color:#ccc;
        }
    </style>
</head>

<body>
<form class="form">
<div class="out">
    <img src="__IMG__/close1.png" alt="" class="close">
    <div class="flex-wrap" style="margin-bottom:32px;">
        <div class="flex-con deng">登录</div>
        <div style="width:56px;"></div>
        <div class="flex-con zhu"  onclick="location.href='{:url('shop/Login/register')}'">注册</div>
    </div>
    <div class="zh">手机号</div>
    <div class="outer">
        <input type="tel" name="phone" class="flex-con" placeholder="请输入您的手机号" maxlength="11" id="user_phone">
    </div>
    <div class="flex-wrap" style="  border-bottom: 1px solid #EEEEEE;position:relative;">
        <div class="flex-con">
            <div class="zh">图形验证码</div>
            <div class="outer" style="  border-bottom: 0;">
                <input type="tel" name="picyzm" id='picyzm' placeholder="请输入验证码">
            </div>
        </div>
        <span class="cord11"style="  font-size: 14px;
            color: rgba(153,153,153,1);
            position: absolute;
            right: 0;
            bottom: 0.8rem;" onclick="need_ma1(this)">获取图形验证码</span>
        <img src="{:url('pictureyzm')}" style=" display:none" class="tx_yzm" onclick="javascript:this.src='{:url('pictureyzm')}?tm='+Math.random()+'&phone='+$('#user_phone').val();" style="float:right;cursor: pointer" id="verify"/>
        <img src="__IMG__/shua.png" class="shua" style="display:none;    margin-top: 50px;
    margin-left: 10px;
    width: 20px;
    height: 20px;" onclick="need_ma2(this)">
    </div>
    <div class="flex-wrap" style="border-bottom: 1px solid #EEEEEE;position:relative;">
        <div class="flex-con">
            <div class="zh">验证码</div>
            <div class="outer" style="  border-bottom: 0;">
                <input type="tel" name="code" id='yzm2' placeholder="请输入验证码">
            </div>
            <div class="code-word hand_icon" onclick="sendcode(this);">获取验证码</div>
        </div>

    </div>
    <div class="btn hand_icon" onclick="login()" tapmode>登录<span></span></div>
    <div class="kuai_deng hand_icon" onclick="location.href='{:url('shop/Login/indexLogin')}'">账号密码登录</div>

</div>
</form>
</body>
<script src="/static/admin/js/jquery.min.js"></script>
<script>
    function need_ma1() {
        $(".tx_yzm").show();
        $(".cord11").hide();
        $(".shua").show();

        $('.tx_yzm').trigger('click');
    }
    function need_ma2() {
        $('.tx_yzm').trigger('click');
    }
    function login() {
        var pattern = /^1[23456789]\d{9}$/;
        if(!pattern.test($('#user_phone').val())){
            alert('请输入正确的手机号');
            return false;
        }
        $.ajax({
            url:"{:url('shop/Login/indexKuaijie')}",
            type:'post',
            data:$('.form').serialize(),
            dataType:'json',
            success:function(res){
                if(res.status != 200){
                    alert(res.msg);
                    $('.tx_yzm').trigger('click');
                    return false;
                }else{
                    window.location.href=res.url;
                }
            }
        })
    }
    //发送验证码
    function sendcode(o){
        var obj= $(o);
        obj.removeAttr('onclick');
        if($('#user_phone').val() == ""){
            alert('请输入手机号');
            obj.attr("onclick",'sendcode(this)');
            return false;
        }else if($('#picyzm').val() == ""){
            alert('请输入图形验证码');
            obj.attr("onclick",'sendcode(this)');
            return false;
        }else{
            var pattern = /^1[23456789]\d{9}$/;
            if(!pattern.test($('#user_phone').val())){
                alert('请输入正确的手机号');
                obj.attr("onclick",'sendcode(this)');
                return false;
            }else{
                $.ajax({
                    url:"{:url('shop/Login/getPhoneCode')}",
                    type:"post",
                    dataType:"json",
                    data:{type:2,phone:$('#user_phone').val(),types:1,yzm:$('#picyzm').val()},
                    success:function(res){
                        if(res.status == 200){
                            settime(obj);
                        }else{
                            alert(res.msg);
                            obj.attr("onclick",'sendcode(this)');
                            $('.tx_yzm').trigger('click');
                            return false;
                        }
                    }
                })

            }
        }
    }
    var countdown=60;
    function settime(obj) {
        obj.addClass('code_gray');
        if (countdown == 0) {
            obj.attr("onclick",'sendcode(this)');
            obj.html("获取验证码");
            obj.removeClass('code_gray');
            countdown = 60;
            return;
        } else {
            obj.html("重新发送(" + countdown + ")");
            countdown--;
        }
        setTimeout(function() {
            settime(obj)
        },1000)
    }
</script>
</html>
